<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" oncopy="return false" oncut="return false;">
		<title></title>
		</head>
		<style type="text/css">
			.content {
				width: 1200px;
				height: auto;
				margin: 0 auto;
			
			}

			.main {
				padding-left: 100px;
			}

			.cnt1 {

				display: flex;
				align-items: center;
				font-size: 25px;
				padding-bottom: 12px;

				margin-bottom: 40px;
			}

			.cnt1 input {

				width: 800px;
				height: 48px;
				border-radius: 20px;
				border: 2px solid #bbbbbb;
				font-size: 24px;

			}

			.cnt1 input::-webkit-input-placeholder {
				padding-left: 20px;
				font-size: 22px;
			}

			.cnt1 img {
				width: 36px;
				margin-left: -40px;
			}

			.cnt3 {
				margin-left: 50px;
			}

			.cnt3 p {
				font-size: 18px;

				margin-bottom: 20px;
				display: flex;
				align-items: center;

			}

			.cnt3 span {
				width: 80px;
				text-align: end;
				margin-right: 20px;

			}

			.cnt3 select {
				width: 400px;
				height: 40px;
				color: #333333;
				font-size: 16px;
				letter-spacing: 1px;
			}

			.cnt2 {
				display: flex;
				flex-direction: column;
				height: 140px;

				justify-content: space-between;

				letter-spacing: 1px;
				font-size: 18px
			}
			.cntb{
				margin-left: 0px;
			}
			.cnt1{
				margin-left: 100px;
			}

			.tab1,
			.tab2 {
				width: 240px;
				height: 50px;
				border-radius: 10px;
				border: #999999 solid 1px;
				line-height: 50px;
				text-align: center;
			}

			.select {
				background-color: #006699;
				color: white;
			}
			

			.cnt4 p span:nth-of-type(1){
				letter-spacing: 1px;
				margin-top: 20px;
				font-size: 18px;
				



			}

			.cnt4 span:nth-of-type(1) {
				font-weight: bold;

			}

			.a {
				display: flex;
			}

			.cnt4 p {
				margin-bottom: 10px;
				margin-left: 150px;
			}

			.cnt5 {
				font-size: 18px;
				margin-left: 60px;
			}

			.cnt5 img {
				width: 700px;
			}

			.map {
				margin-top: 10px;
			}
			.item {
				display: flex;
				margin-left: 50px;
				margin-bottom: 30px;
				
				
				
			}
			.item img{
				width: 80px;
				height:80px;
				border-radius: 50%;
				margin-right: 20px;
				
			}
			.fav p{margin: 0;
				margin-bottom: 10px;
				width: 600px;
				line-height: 28px;
				
			}
			
			.cntb1{
				display: none;
			}
		
		</style>
		<body>
			<div class="content">
				<div class="main">
					<div class="cnt1">

						<input type="" name="" id="" value="" placeholder="查询公证处" />
						<img src="img/hy_cx_1.png">
					</div>
					<div class="a">
						<div class="cnt2">
							<div class="tab1 select">
								机构信息
							</div>
							<div class="tab2">
								人员信息
							</div>
						</div>

<div class="cnta">
		<div class="cntb">
								<div class="cnt3">
									<p><span>类型</span><select name="">
											<option value="">请选择</option>
										</select></p>
									<p><span>区域</span><select name="">
											<option value="">请选择</option>
										</select></p>
	
									<p><span>所辖机构</span><select name="">
											<option value="">请选择</option>
										</select></p>
								</div>
								<div class="cnt4">
									<p> <span>机构名称:&nbsp;</span><span>牡丹江市东安区公证处</span></p>
									<p><span>机构地址:&nbsp;</span><span>牡丹江市东安区卧龙街41号</span></p>
									<p> <span>机构电话:&nbsp;</span><span>0453-5903060</span></p>
								</div>
	<div class="cnt5">
		<div class="">
			定义信息
		</div>
		<div class="map">
			<img src="img/hy_ditu_1.png">
		</div>
	</div>
	
							</div>
						
							<div class="cntb cntb1 ">
										<div class="cnt3">
											<p><span>类型</span><select name="">
													<option value="">请选择</option>
												</select></p>
											<p><span>区域</span><select name="">
													<option value="">请选择</option>
												</select></p>
						
											<p><span>所辖机构</span><select name="">
													<option value="">请选择</option>
												</select></p>
										</div>
										<div class="cnt6">
											<div class="item">
												<div class="hp">
													<img src="img/hy_ditu_2.png" >
												</div>
												<div class="cnt4 fav">
													<p> <span>姓名:&nbsp;</span><span>张三</span></p>
													<p><span>职务:&nbsp;</span><span>老师</span></p>
													<p> <span>电话:&nbsp;</span><span>13333333333</span></p>
													<p > <span>擅长业务:&nbsp;</span><span >民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷</span></p>
												</div>
											</div>
										</div>
										<div class="cnt6">
											<div class="item">
												<div class="hp">
													<img src="img/hy_ditu_2.png" >
												</div>
												<div class="cnt4 fav">
													<p> <span>姓名:&nbsp;</span><span>张三</span></p>
													<p><span>职务:&nbsp;</span><span>老师</span></p>
													<p> <span>电话:&nbsp;</span><span>13333333333</span></p>
													<p > <span>擅长业务:&nbsp;</span><span >民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷民事纠纷</span></p>
												</div>
											</div>
										</div>
									</div>
									
</div>
					
					
					
					
					
					
					
					</div>

					
				</div>
			</div>


		

			<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$(".cnt2 div").click(function() {
					var i = $(this).index();
					$(this).addClass("select").siblings().removeClass("select")
				$('.cnta>div').eq(i).show().siblings().hide();
				})
			</script>
		</body>
</html>
